<div th:substituteby="components/fieldTooltip" />
<span class="error" th:errors="*{fields['__${field.name}__'].value}" />

<!-- The fileinput-button span is used to style the file input field as button -->
    <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span th:text="#{${field.friendlyName}}">Select files...</span>
        <!-- The file input field used as target for the file upload widget -->
        <input id="fileupload" type="file" name="file"/>
    </span>
    <br/>
    <br/>
    <!-- The global progress bar -->
    <div id="progress" class="progress">
        <div class="progress-bar progress-bar-success"></div>
    </div>
    <!-- The container for the uploaded files -->
    <div id="files" class="files">
    </div>
    
    <a class="downloadable" href="downloadfile" >
		<i class="icon-cloud-download"></i>
		<span th:text="*{fields['fileName'].value}">.</span>
		
	</a>


<script>

	function getCsrfToken() {
	    var csrfTokenInput = $('input[name="csrfToken"]');
	    if (csrfTokenInput.length == 0) {
	        return null;
	    }
	    
	    return csrfTokenInput.val();
	}
	$( document ).ready(function() {
// 		jQuery('form.entity-form').attr('enctype','multipart/form-data');
		
		jQuery(function () {
		    'use strict';
		    // Change this to the location of your server-side upload handler:
		    var url = jQuery('form.entity-form').attr('action')+"/uploadfile?csrfToken="+getCsrfToken();

		    jQuery('#fileupload').fileupload({
		        url: url,
		        dataType: 'json',
		        done: function (e, data) {
		        	jQuery.each(data.result.files, function (index, file) {
		        		jQuery('<p/>').text(file.name).appendTo('#files');
		            });
		        	location.reload();
		        },
		        progressall: function (e, data) {
		            var progress = parseInt(data.loaded / data.total * 100, 10);
		            jQuery('#progress .progress-bar').css('width', progress + '%'
		            );
		        }
		    }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
		});
		
	});	
	
</script>